<template>
  <div class="all" v-loading="loading">
<el-button type="primary" size="small" @click="add=true">添加礼物</el-button>
<el-table :data="list">
  <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
  <el-table-column align="center" prop="giftName" label="礼物名称"></el-table-column>
  <el-table-column align="center" prop="id" label="礼物Id" width="50"></el-table-column>
  <el-table-column align="center" prop="needCoin" label="价格(幸运币)"></el-table-column>
  <el-table-column align="center" label="小图(25*25)" >
    <template slot-scope="{row}">
      <el-image :src="row.giftIcon" style="width: 100px; height: 100px" fit="fit"></el-image>
    </template>
  </el-table-column>
  <el-table-column align="center" label="SVGA">
    <template slot-scope="{row}">
      <el-link @click="SeeSvga(row.flash)" v-if="row.flash">查看SVGA</el-link>
      <div v-else>暂无动画</div>
    </template>
  </el-table-column>
  <el-table-column align="center" prop="addTime" label="添加时间"></el-table-column>
  <el-table-column align="center" label="是否启用">
    <template slot-scope="{row}">
      <el-switch
        v-model="row.enable"
        active-color="#13ce66"
        inactive-color="#b3afafe8"
        :active-value='1'
        :inactive-value='0'
        @change="Genable_set(row)"
        >
      </el-switch>
    </template>
  </el-table-column>
  <el-table-column align="center" label="操作">
    <template slot-scope="{row}">
      <el-button type="primary" @click="modify=JSON.parse(JSON.stringify(row)),mod=true">修改</el-button>
    </template>
  </el-table-column>
</el-table>

      <div class="hide" v-show="svga_shop">
        <div id='canvas'>
           <i class="el-icon-close" @click="svga_shop=!svga_shop"></i>
         </div>
      </div>
    <el-dialog :visible.sync="mod" width="30%" :title="'修改——'+modify.giftName" center>
      <el-form label-width="100" border>
        <el-form-item label="礼物名称">
          <el-input v-model="modify.giftName" size="small"></el-input>
        </el-form-item>
        <el-form-item label="礼物价格">
          <el-input type="number" v-model="modify.needCoin" size="small"></el-input>
        </el-form-item>
        <el-form-item label="礼物图标">
          <el-upload
            class="avatar-uploader"
            action="#"
            ref="Modupload"
            :show-file-list="false"
            :on-change="handleChange"
            :auto-upload="false">
            <img v-if="modify.giftIcon" :src="modify.giftIcon" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="SVGA">
          <el-upload
            class="avatar-uploader"
            action="#"
            ref="Modupload"
            :show-file-list="false"
            :on-change="Modflash"
            :auto-upload="false">
            <div v-show="type.svga!=0" id="modSvga"></div>
            <i v-show="!type.svga" class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch v-model="modify.enable" active-color="#13ce66" inactive-color="#b3afafe8" :active-value='1' :inactive-value='0'></el-switch>
        </el-form-item>
        <div style="margin-top: 8px;">
          <el-button type="primary" round @click="ModGift">提交</el-button>
          <el-button round @click="modify=null">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog width="30%" title="添加礼物" :visible.sync="add" :before-close="handleClose">
      <el-form label-width="100">
        <el-form-item label="礼物名称">
          <el-input size="small" v-model="addgift.giftName"></el-input>
        </el-form-item>
        <el-form-item label="礼物价格">
          <el-input size="small" v-model="addgift.needCoin"></el-input>
        </el-form-item>
        <el-form-item label="礼物图标">
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :on-change="AddIcon"
            :auto-upload="false">
            <img v-if="addgift.giftIcon" :src="addgift.giftIcon" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="SVGA">
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :on-change="Addflash"
            :auto-upload="false">
            <div v-show="addgift.flash" id="addSvga"></div>
            <i v-show="!type.svga" class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch
            v-model="addgift.enable"
            active-color="#13ce66"
            inactive-color="#b3afafe8"
            :active-value='1'
            :inactive-value='0'
            >
          </el-switch>
        </el-form-item>
      </el-form>
      <div style="text-align: center; padding-top: 8px;">
        <el-button type="primary" round @click="submit">提交</el-button>
     </div>
    </el-dialog>
    </div>

  </div>
</template>

<script>
   import SVGA from 'svgaplayerweb';
   import {Gdel,ModGift,enable_set,Gadd,getAll,UploadFlash,UploadIcon} from "@/utils/API"
   import Cookies from 'js-cookie'
  export default{
     inject:["reload"],
    data(){
      return{
        add:false,
        addgift:{
          giftIcon:'',
          flash:'',
          enable:0,
          giftName:'',
          needCoin:''
        },
        loading:true,
        list:[],
        shop:false,
        type:{svga:false},
        svga_shop:false,
        modify:[],
        mod:false,
        admin:{
          adminName:Cookies.get('adminName'),
          token:Cookies.get('token')
        },
        loading:null
      }
    },
    methods:{
      handleClose(done){
        this.addgift={
          giftIcon:'',
          flash:'',
          enable:0,
          giftName:'',
          needCoin:''
        }
         done();
      },
      //添加提交
      submit(){
       this.IconUpload(this.addgift.giftIcon).then(Icon=>{
         if(Icon!=null){
           this.addgift.giftIcon=Icon
         }
         this.FlashUpload(this.addgift.flash).then(Flash=>{
           this.addgift.flash=Flash
           const result={
             adminName:Cookies.get('adminName'),
             token:Cookies.get('token'),
             gift:this.addgift
           }
           Gadd(result).then(res=>{
             if(res.code==0){
               this.$message.success('修改成功')
               this.reload()
             }
           })
         })
       })
      },
      //添加小图
      AddIcon(file){
        var _this=this
        _this.type.GiftIcon=file.raw.name
        var event = event || window.event
        var file = event.target.files[0];
        var reader = new FileReader();
            reader.onload = function(e) {
              _this.addgift.giftIcon =e.target.result
               _this.type.giftIcon=true
             }
            reader.readAsDataURL(file);
      },
      //添加SVGA
      Addflash(file){
        var _this=this
        if(file.raw.name.split('.')[1]=="svga"){
          _this.type.Svga=file.raw.name
          var event = event || window.event
          var file = event.target.files[0];
          var reader = new FileReader();
              reader.onload = function(e) {
                _this.addgift.flash = e.target.result
                _this.type.svga=true
               _this.svgaInitial(e.target.result,'#addSvga')
               }
              reader.readAsDataURL(file);
        }
      },
      //修改
      ModGift(){
     this.IconUpload(this.modify.giftIcon).then(Icon=>{
       if(Icon!=null){
         this.modify.giftIcon=Icon
       }
       this.FlashUpload(this.modify.flash).then(Flash=>{
         this.modify.flash=Flash
         const result={
           adminName:Cookies.get('adminName'),
           token:Cookies.get('token'),
           gift:this.modify
         }
         ModGift(result).then(res=>{
           if(res.code==0){
             this.$message.success('修改成功')
             this.reload()
           }
         })
       })
     })
      },
      //上传svga
      FlashUpload(e){
        return new Promise((resolve, reject)=>{
          if(this.type.svga==1||this.type.addsvga){
            const data={
              adminName:Cookies.get('adminName'),
              token:Cookies.get('token'),
              giftName:this.modify.giftName||this.addgift.giftName,
              picName:this.type.Svga,
              img:e.split(',')[1]
            }
            UploadFlash(data).then(res=>{
              if(res.code==0){
               resolve(res.data.imgUrl)
              }
            })
          }else{
             resolve(null)
          }
        })

      },
      IconUpload(e){
        //上传小图
         return new Promise((resolve, reject)=>{
         if(this.type.giftIcon){
           const data={
             adminName:Cookies.get('adminName'),
             token:Cookies.get('token'),
             giftName:this.modify.giftName||this.addgift.giftName,
             picName:this.type.GiftIcon,
             img:e.split(',')[1]
           }
           UploadIcon(data).then(res=>{
             if(res.code==0){
              resolve(res.data.imgUrl)
             }
           })
         }else{
            resolve(null)
         }
 })
      },
      //动画
      Modflash(file){
        if(file.raw.name.split('.')[1]=="svga"){
          var _this=this
          _this.type.Svga=file.raw.name
            var event = event || window.event
            var file = event.target.files[0];
            var reader = new FileReader();
                reader.onload = function(e) {
                  console.log()
                  _this.modify.flash = e.target.result
                  _this.type.svga=1
                 _this.svgaInitial(e.target.result,'#modSvga')
                 }
                reader.readAsDataURL(file);

        }
      },
      //礼物图标
      handleChange(file, fileList){
        var _this=this
        var event = event || window.event
        var file = event.target.files[0];
        var reader = new FileReader();
            reader.onload = function(e) {
              _this.modify.giftIcon = e.target.result
               _this.type.giftIcon=true
               _this.type.GiftIcon=file.raw.name
             }
            reader.readAsDataURL(file);
      },
      //修改状态
      Genable_set(e){
        enable_set(e,this.admin).then(res=>{
        })
      },

      SeeSvga(e){
        this.svga_shop=true
          const i='/svga'+e.slice(56)
          this.svgaInitial(i,"#canvas")
      },
      svgaInitial(res,id){
                 var player = new SVGA.Player(id);
                 var parser = new SVGA.Parser(id);
                    parser.load(res, function(videoItem){
                                          player.setVideoItem(videoItem);
                                          player.startAnimation();
                                })
         },
    },

    mounted() {
      this.loading=true
      getAll(this.admin).then(res=>{
         this.list=res.data.giftList
         this.$nextTick(function(){
            this.loading=false
         })
      })
    },
    watch:{
      modify(val){
        if(val!=null){
          if(val.flash){
            this.type.svga=2
             const i='/svga'+val.flash.slice(56)
              this.svgaInitial(i,"#modSvga")
          }else{this.type.svga=0}

        }else{
          this.type.svga=0
        }
        console.log(val)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .el-dialog__wrapper{
    /deep/ .Svg_dialog{background: rgba(255,255,255,.2);border: 0;box-shadow:0 0 0;
    i{color: #fff;}
    }
    #canvas{height: 60vh;}
  }
th{
      height: 30px;
      background: #eef3f7;
      border-bottom: 1px solid #d5dfe8;
      font-weight: normal;
}
tr{
  text-align: center;

}
// td{
//   border-bottom: #eee 1px solid;
//       padding-top: 5px;
//       padding-bottom: 5px;
// }
// td input{
// margin: auto;
// display: block;
// text-align: center;
// box-shadow:0 0 0 0 rgba(238,238,238,0.5)
// }
img{
  width: 6.25rem;
  height: 6.25rem;
}
// .Popup{
//   position: fixed;
//     top: 28%;
//     left: 35%;
//     width: 33%;
//     height: 40vh;
//     background-color: #edf1ee;
//     border-radius: 5px;
//     box-shadow: 0px 0px 100px #0c0c0c73;
// }
// .P-nav{
//   margin:6px auto;
//   width: 95%;
//     font-size: 22px;
//     border-bottom: 1px solid #d4cfcf;
//     padding-bottom: 5px;
// }
// .P-nav>i{
//   float: right;
//   font-size: 22px;
// }
// .Popup> .el-button{
//   text-align: center;
//   margin: auto;
// }
// .Popup td{
//   border-bottom: 1px solid #d4cfcf;
// }
/deep/ .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon{
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
      border: 1px dashed #d9d9d9;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
  .hide{
    width: 86%;
    height: 88%;
    position: fixed;
    top: 10%;
  }
  #canvas{
    text-align: left;
        width: 60%;
        height: 60vh;
        position: absolute;
        top: 7vh;
        left: 17%;
        background: rgba(113,109,109,0.2);
        i{font-size: 66px;
          text-align: right;
          float: right;}
  }
 #addSvga, #modSvga{
    height: 150px;
  }
  .el-form{
    width: 60%;
    margin: auto;
    text-align: center;
    .el-input{width: auto;}
  }
 /deep/ .el-upload{width: 68%;}
  .avatar-uploader{height: 140px;
    width: 100%;
    }
    .avatar-uploader .el-upload {

        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
</style>
